<!--
  登录表单
  Methods:
    switchToLogin()
    switchToReg()
  Events:
    login(e: {username: String, password: String})
    register(e: {username: String, password: String, confirmPassword: String, email: String})
-->

<template>
  <div id="login-form">
    <el-tabs v-model="activatedForm" style="height: 100%" stretch>
      <el-tab-pane label="登录" name="login" style="height: 400px">
        <div class="form-body">
          <el-form :model="loginForm" :rules="rules1" :show-message="true" ref="loginForm">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="loginForm.username" />
            </el-form-item>
            <el-form-item
                label="密码"
                prop="password"
            >
              <el-input v-model="loginForm.password" show-password />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="注册" name="register" style="height: 550px" :disabled="disableRegister">
        <div class="form-body">
          <el-form :model="registerForm" ref="registerForm" :rules="rules2">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="registerForm.username" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="registerForm.password" show-password/>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input v-model="registerForm.confirmPassword" show-password />
            </el-form-item>
            <el-form-item label="电子邮箱" prop="email">
              <el-input v-model="registerForm.email" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="register">注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

export default {
  name: "EsLoginForm",
  data() {
    let password = (rule, val, callback) => {
      if (val.length < 6) {
        callback(new Error('密码应至少为6个字符！'));
        return
      }
      callback()
      if (val !=='') {
        if (this.registerForm.confirmPassword !== '') {
          this.$refs.registerForm.validateField('confirmPassword')
        }
      }
    }
     let confirmPassword = (rules, val, callback) => {
      if (val !== '' && val !== this.registerForm.password) {
        callback(new Error("两次输入不一致"));
      } else {
        callback()
      }
    }

    return {
      activatedForm: "login",
      loginForm: {
        username: "",
        password: ""
      },
      registerForm: {
        username: "",
        password: "",
        confirmPassword: "",
        email: "",
      },
      rules1: {
        username: [{required: true, message: '请输入用户名'}],
        password: [{required: true, message: '请输入密码'}],
      },
      rules2: {
        username: [{required: true, message: '请输入用户名'}],
        password: [
            {required: true, message: '请输入密码'},
            {validator: password}
        ],
        confirmPassword: [
          {required: true, message: '请再次输入密码'},
            {validator: confirmPassword}
        ],
        email: [
            {required: true, message: '请输入电子邮箱'},
            {type: 'email', message: '邮箱地址格式不正确'}
        ]
      }
    }
  },
  methods: {
    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$emit("login", this.loginForm)
        }
      })
    },
    register() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          this.$emit("register", this.registerForm)
        }
      })
    },
    switchToLogin() {
      this.activatedForm = "login"
      this.$refs.registerForm.resetFields();
    }
  },
  props: {
    disableRegister: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
  #login-form {
    background-color: rgba(220, 223, 230, 33%);
    height: 600px;
  }

  .form-body {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>